<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import type { Projects } from '@/common/types/projects'
import { PagePath } from '@/common/constants'

defineProps<{
  project: Projects
}>()

/**
 * 分享内容
 */
const projectShareContent = ref({
  title: '',
  path: '',
  imageUrl: '',
})

/**
 * 分享
 */
const onShare = (project: Projects) => {
  const { projectName, id, imgUrl } = project

  projectShareContent.value = {
    title: projectName,
    path: `/projects_package/projects_detail?projectId=${id}`,
    imageUrl: imgUrl,
  }
}

onShareAppMessage(() => {
  return projectShareContent.value
})
</script>

<template>
  <!-- 公益项目组件 -->
  <view v-show="project.id" class="projects">
    <image class="projects-img" :src="project.imgUrl" mode="aspectFill" />
    <view class="projects-share">
      <hope-button-share bg-color="grey" @click="() => onShare(project)" />
    </view>
    <view class="projects-content">
      <text class="projects-title ellipsis-1">
        {{ project.projectName }}
      </text>
      <text class="projects-brief ellipsis-2">
        {{ project.brief }}
      </text>
    </view>
    <hope-button title="帮助" @on-click="() => goToPage(`${PagePath.PROJECT_DETAIL}?projectId=${project.id}`)" />
  </view>
</template>

<style scoped lang="scss">
.projects {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  padding-block: 30rpx;
  /* border-bottom: 1px solid $bg-black-opacity-3; */

  &-img {
    width: 100%;
    height: 300rpx;
    border-radius: 30rpx;
  }

  &-share {
    position: absolute;
    top: 40rpx;
    right: 20rpx;

  }

  &-content {
    padding-inline: 20rpx;
  }

  &-title {
    font-size: $font-size-base;
  }

  &-brief {
    color: $uni-text-color-grey;
    font-size: $font-size-sm;
  }
}
</style>
